<template>
  <el-dialog
    v-if="load"
    title="批量维护类型"
    width="800"
    v-model="visible"
    @close="handleClose"
    draggable
    align-center
  >
    <div>
      <div>
        <el-select
          class="!w-[180px]"
          v-model="image_for"
          placeholder="请选择类型"
          clearable
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <el-checkbox-group v-model="checkedImage" @change="handleCheckedCitiesChange">
        <el-checkbox
          v-for="(item, index) in records"
          :key="item"
          :label="item.image_link || item.url"
          :value="item.image_link || item.url"
        >
          <el-image
            :src="item.image_link_watermark || item.image_link || item.url"
            style="width: 100px; height: 100px"
            @contextmenu.prevent
          ></el-image>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleSave">修改类型</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { reactive, toRefs } from "vue";

const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});

const { options } = toRefs(props);

const data = reactive({
  load: false,
  visible: false,
  image_item: {},
  checkAll: false,
  isIndeterminate: false,
  checkedImage: [],
  records: [],
  image_for: "",
});

const {
  load,
  visible,
  image_item,
  checkAll,
  isIndeterminate,
  checkedImage,
  records,
  image_for,
} = toRefs(data);

const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  image_item.value = Object.assign({}, data);
  records.value = image_item.value.values.filter((i) => {
    if (!i.delete) {
      return i;
    }
  });
  visible.value = true;
};

const handleCheckAllChange = (val) => {
  checkedImage.value = val ? records.value.map((item) => item.image_link) : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === records.value.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < records.value.length;
};

const handleSave = () => {
  if (!image_for.value) {
    ElMessage.error("请选择类型");
    return;
  }
  if (!checkedImage.value.length) {
    ElMessage.error("至少勾选一项进行修改");
    return;
  }

  image_item.value.values.forEach((element) => {
    if (checkedImage.value.includes(element.image_link)) {
      element.image_for = image_for.value;
    }
  });
  emit("edit", image_item.value);
  handleClose();
};

const emit = defineEmits(["edit", "close"]);

const handleClose = () => {
  records.value = [];
  image_item.value = {};
  checkedImage.value = [];
  checkAll.value = false;
  isIndeterminate.value = false;
  visible.value = false;
  image_for.value = "";
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
:deep(.el-checkbox) {
  height: 100px;
  margin-bottom: 12px;
}
</style>
